<template>
    <div class="app-file-upload"> 
        <div @click="deleteFile" class="app-file-upload-tag">
            <van-tag v-if="isShow" type="primary" size="medium">{{fileList[0].name}}</van-tag>
            <span v-if="isShow" class="app-file-upload-tag-close"><van-icon name="cross" /></span>
        </div>
        <van-uploader  :after-read="afterRead" :accept="accept" :disabled="disabled"  @oversize="oversize" :max-count="1" :max-size="maxSize">
            <van-icon name="plus" />
        </van-uploader>  
    </div>
</template>



<script lang="ts">
import { Vue, Component, Prop, Provide, Emit, Watch } from 'vue-property-decorator';
import {Environment} from '@/environments/environment';
import axios from 'axios'
import { Toast } from 'vant'

@Component({
    components: {
      
    }
})
export default class AppUploadFile extends Vue {

        /**
         * 是否禁用
         *
         * @type {boolean}
         * @memberof AppUploadFile
         */
        @Prop() public disabled?:boolean;

        /**
         * 传入值
         *
         * @type {boolean}
         * @memberof AppUploadFile
         */
        @Prop() public value?:any;
        
        /**
        * 文件最大大小 byte
        * @type {any}
        * @memberof AppUploadFile
        **/
        public maxSize:number=5*1024*1024;

        /**
        * 可接受的类型
        * @type {any}
        * @memberof AppUploadFile
        **/
        public accept:any="*"

        /**
        * 是否显示
        * @type {boolean}
        * @memberof AppUploadFile
        **/
        public isShow:boolean = false;

        /**
        * 单个文件列表
        * @type {Array<any>}
        * @memberof AppUploadFile
        **/
        public fileList:Array<any> = [];
        
        /**
         * 监听value值变化
         *
         * @memberof AppUploadFile
         */
        @Watch('value', { immediate: true, deep: true })
        onValueChanged(val: any, oldVal: any) {
            if(val && JSON.parse(val).length >0){
                this.fileList = JSON.parse(val);
                this.isShow = true;
            }else{
                this.fileList = [];
                this.isShow = false;
            }
        }

        /**
        *  已读后上传
        *  @param {*} file
        *  @memberof AppUploadFile
        **/
        public afterRead(file:any){            
            if(this.fileList.length >0){
                return ;
            }
            this.upLoaderFile(file.file);             
        }

        /**
        *  上传文件超过最大限制调用
        *  @param {*} file
        *  @memberof AppUploadFile
        **/
        public oversize(file:any){
          Toast("文件过大,上传失败")
        }

        /**
        *  删除文件
        *  @param {*} file
        *  @memberof AppUploadFile
        **/
        public deleteFile(){
            this.fileList = [];
            this.isShow = false;
            this.emitValue(this.fileList);
        }

        /**
        *  组件抛出值
        *  @param {*} val
        *  @memberof AppUploadFile
        **/
        public emitValue(val:any){
            this.$emit('valuechange',JSON.stringify(val));
        }

        /**
         * 上传文件
         *
         * @memberof AppUploadFile
        */
        public upLoaderFile (file:any) {	
            let params = new FormData()
            params.append('file', file)
            let config = {
                  headers: {
                      'Content-Type': 'multipart/form-data'
                  }
              }
              axios.post(Environment.BaseUrl+Environment.UploadFile ,params, config).then(res => {
                    if (res && res.data && res.status === 200) {
                      Toast("上传成功");
                      this.fileList.push(res.data)
                      this.isShow = true;
                      this.emitValue(this.fileList);
                    } else {
                      Toast("上传失败");
                    }
                  }).catch(err => {
                      Toast("上传失败");
                });
        }

        }



    

</script>
<style lang="less">
    .app-file-upload{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 2rem;
        .app-file-upload-tag{
            position: relative;
            .van-tag {
                padding: .5em .8em;
            }
            .app-file-upload-tag-close{
                position: absolute;
                top: 0;
                right: 0;
                color: #fff;
                font-size: .5rem;
            }
        }
        .van-uploader{
            min-width: none;
            .van-icon {
                position: relative;
                font: 14px/1 "vant-icon";
                font-size: inherit;
                font-size: 20px;
                text-rendering: auto;
                -webkit-font-smoothing: antialiased;
                margin-top: 10px;
            }
        }
    }
</style>